<template>
    <div class="login">
        <div class="loginBox">
            <div class="logo">登录</div>
            <el-form :model="loginForm" ref="loginForm">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" class="w300" @keyup.enter.native="login" placeholder="请输入账号" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" class="w300" @keyup.enter.native="login" placeholder="请输入密码" clearable
                        type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round style="width:100%;" @click="login()" :loading="loginStatus === 1">
                        {{ loginBtnText[loginStatus] }}
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
	import Api from './assets/api';

	export default {
		data() {
			return {
				systemName: '数据检测',
				loginForm: {
					username: '',
					password: ''
				},
				loginStatus: 0,
				loginBtnText: {
					0: '登录',
					1: '正在登录'
				}
			}
		},
		methods: {
			login() {
				if(!this.loginForm.username || !this.loginForm.password) {
					this.$message.error('账号密码不能为空');
					return;
				}
				this.loginStatus = 1;

				let params = {
					...this.loginForm
				}

				let callback = res => {
					this.loginStatus = 0;
                    if (res.code != 20000) return this.$message.error(res.msg)

                    const { token, username,phone } = res.data;
                    sessionStorage.setItem('token', token); 
                    sessionStorage.setItem('username', username); 
                    sessionStorage.setItem('phone', phone); 
                    window.vue.$message.success('登录成功')
                    this.$router.push('/dataDetection')
				}

				Api.login(params, callback);
				
			}
		}
	}
</script>
<style scoped>





    .w300{
        width: 300px;
    }

.login {
	height: 100%;
	background: url("./assets/images/loginbg.jpg") no-repeat;
	background-size: cover;
} 
.login .el-input__inner {
    background: rgba(0, 0, 0, 0);
    border: 0px;
    border-bottom: 1px solid;
    font-size: 18px;
    color: white;
}
.logo {
    width: 300px;
    text-align: center;
    margin-bottom: 30px;
    font-size: 32px;
    color: #fdfdf1;
}
.loginBox {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 460px;
    height: 350px;
    margin-top: -175px;
    margin-left: -230px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* border-radius: 5px; */
    text-align: center;
    background: rgb(9, 15, 45, 0.5);
    border: 1px solid #12374d;
}
.login .el-button--primary {
    background-color: #409eff;
    border-color: #409eff;
}
.login .el-button--primary:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}
.login .el-input__inner:hover {
    border: 0px;
    border-bottom: 1px solid;
}
</style>
